<template>
  <div id="printTest">
    <el-row>
      <el-col :span="19">
        <div class="grid-content bg-purple">
          <el-button type="info" @click="$router.push('/Wage/Edit')" icon="el-icon-circle-plus" size="mini">新增
          </el-button>
          <el-button type="primary" icon="el-icon-printer" size="mini" v-print="'#printTest'">打印</el-button>
          <el-button type="success" v-show="false" icon="el-icon-document-delete" size="mini">导出</el-button>
          <el-button type="primary" v-show="false" icon="el-icon-folder-opened" size="mini">导入</el-button>
          <el-button type="info" icon="el-icon-back" size="mini" @click="shang">上一月</el-button>
          <el-button type="info" icon="el-icon-right" size="mini" @click="xia">下一月</el-button>
          <span style="padding-left:10px;">{{DateCount}}</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-input size="mini" v-model="FullName" placeholder="查找...">
            <el-button slot="append" @click="FNameSelectWageList" icon="el-icon-search" style="width:50px;"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <!-- 数据展示 -->
    <el-table :data="tableDate" height="500px">
      <el-table-column prop="DepartmentName" label="部门"></el-table-column>
      <el-table-column prop="FullName" label="姓名"></el-table-column>
      <el-table-column prop="TitleName" label="职业"></el-table-column>
      <el-table-column prop="BaseWage" label="基本工资"></el-table-column>
      <el-table-column prop="WorkDays" label="工作天数"></el-table-column>
      <el-table-column prop="OTWage" label="加班工资"></el-table-column>
      <el-table-column prop="OTDays" label="加班天数"></el-table-column>
      <el-table-column prop="PerformanceWage" label="绩效工资"></el-table-column>
      <el-table-column prop="ReissueWage" label="补发工资"></el-table-column>
      <el-table-column prop="Commission" label="提成"></el-table-column>
      <el-table-column prop="Bonus" label="奖金"></el-table-column>
      <el-table-column prop="SocialSecurity" label="社保"></el-table-column>
      <el-table-column prop="AccumulationFund" label="公积金"></el-table-column>
      <el-table-column prop="IncomeTax" label="个税"></el-table-column>
      <el-table-column prop="Deductions" label="扣款"></el-table-column>
      <el-table-column prop="TotalWage" label="应发工资"></el-table-column>
      <el-table-column fixed="right" label="操作" min-width="170">
        <template slot-scope="scope">
          <el-button type="primary" @click="Edit(scope.row.pk_Wage)" size="mini" icon="el-icon-edit">修改</el-button>
          &nbsp;
          <el-popconfirm @onConfirm="Del(scope.$index,scope.row.pk_Wage)" title="确定删除此信息">
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.List_Div2_text {
  height: 28px;
  width: 80%;
  border: 1px solid #ccc;
  padding-left: 8px;
}
.grid-content {
  padding-bottom: 10px;
}
</style>
<script>
export default {
  data () {
    return {
      tableDate: [],
      Y: null,//年
      M: null,//月
      FullName: ''
    }
  },
  methods: {
    Del (index, pk_Wage) {
      this.$axios({
        url: "/HrApi/wagemange/DelWagedata",
        method: "POST",
        data: this.$Qs.stringify({
          pk_Wage
        })
      }).then(res => {
        if (!res.data.code) {
          this.$message.success(res.data.msg)
          //在集合中删除此行
          this.tableDate.splice(index, 1)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    shang () {
      this.M--
      if (this.M < 1) {
        this.Y -= 1
        this.M = 12
      }
      this.GetDt()
    },
    xia () {
      let date = new Date();
      if (this.Y === date.getFullYear() && this.M === (date.getMonth() + 1)) {
        this.$message.info("工资截至为当月！")
        return
      }
      this.M++
      if (this.M > 12) {
        this.Y += 1
        this.M = 1
      }
      this.GetDt()
    },
    Edit (id) {
      //编辑
      this.$router.push({
        path: "/Wage/Edit",
        query: {
          pk_Wage: id,
          NowTime: `${this.Y}/${this.M}/1`
        }
      })
    },
    GetDt () {
      this.$axios({
        url: '/HrApi/wagemange/GetAttendanceList',
        method: 'GET',
        params: {
          SelTime: `${this.Y}/${this.M}/1`
        }
      }).then(res => {
        this.tableDate = res.data.data;

      })
    },
    //根据FullName搜索
    FNameSelectWageList () {
      if (this.FullName.length != 0) {
        this.$axios({
          url: '/HrApi/wagemange/FNameSelectWageList',
          method: 'GET',
          params: {
            FullName: this.FullName
          }
        }).then(res => {
          this.tableDate = res.data.data;
        })
      }
      else {
        this.GetDt();
      }
    }
  },
  mounted () {
    let date = new Date();
    this.Y = date.getFullYear()
    this.M = date.getMonth() + 1
    this.GetDt();
  },
  computed: {
    DateCount: function () {
      return `${this.Y}年 ${this.M}月`
    }
  }
};
</script>